<template>
	<view class="">
		<uni-nav-bar @clickLeft="back" left-icon="left" title="执行单变更申请" background-color="#007AFF" color="#000"
			statusBar="true"></uni-nav-bar>
		<!-- //开启表单检验 -->
		<scroll-view class="scrollheight" scroll-y="true" :style="{height:setcollapseheight()+ 'px'}"
			style="margin-top: 10rpx;">

			<uni-forms :modelValue="formData" ref="form" :rules="rules">
				<view class="record-add-view">
					<uni-forms-item name="serviceTypeName">
						<view class="add-view-item">
							<!-- <image class="add-view-item-img" src="@/static/order/count.png" mode="widthFix">
							</image> -->
							<view class="add-view-item-name">执行单号：</view>
							<uni-easyinput disabled v-model="formData.executeNo" :inputBorder="false"
								placeholder="请输入" type="text">
							</uni-easyinput>
						</view>
					</uni-forms-item>
					<uni-forms-item name="serviceTypeName">
						<view class="add-view-item">
							<!-- <image class="add-view-item-img" src="@/static/order/count.png" mode="widthFix">
							</image> -->
							<view class="add-view-item-name">服务分类：</view>
							<uni-easyinput disabled v-model="formData.serviceTypeName" :inputBorder="false"
								placeholder="请输入" type="text">
							</uni-easyinput>
						</view>
					</uni-forms-item>
					<uni-forms-item name="serviceProjectName">
						<view class="add-view-item">
							<!-- <image class="add-view-item-img" src="@/static/order/count.png" mode="widthFix">
							</image> -->
							<view class="add-view-item-name">服务项目：</view>
							<uni-easyinput disabled v-model="formData.serviceProjectName" :inputBorder="false"
								placeholder="请输入" type="text">
							</uni-easyinput>
						</view>
					</uni-forms-item>
					<uni-forms-item name="serviceProjectName">
						<view class="add-view-item">
							<!-- <image class="add-view-item-img" src="@/static/order/count.png" mode="widthFix">
							</image> -->
							<view class="add-view-item-name">执行单类型：</view>
							<view class="itemValue disable">{{getOrderType(formData.executeType)}}</view>
						</view>
					</uni-forms-item>
					<!-- <uni-forms-item name="phone">
						<view class="add-view-item">
							<image class="add-view-item-img" src="@/static/order/calendar.png" mode="widthFix">
							</image>
							<view class="add-view-item-name">子类：</view>
							<uni-easyinput disabled v-model="serviceObj.svcName" :inputBorder="false" placeholder="请输入">
							</uni-easyinput>
						</view>
					</uni-forms-item> -->
					<template v-if="formData.executeType == 0">
						<uni-forms-item name="deliveryStartDate">
							<view class="add-view-item">
								<!-- <image class="add-view-item-img" src="@/static/order/mianji.png" mode="widthFix">
								</image> -->
								<view class="add-view-item-name">服务开始时间：</view>
								<uni-datetime-picker type="date" v-model="formData.deliveryStartDate" :left-icon="false" />
							</view>
						</uni-forms-item>
						<uni-forms-item name="deliveryEndDate">
							<view class="add-view-item">
								<!-- <image class="add-view-item-img" src="@/static/order/mianji.png" mode="widthFix">
								</image> -->
								<view class="add-view-item-name">服务结束时间：</view>
								<uni-datetime-picker type="date" v-model="formData.deliveryEndDate" :left-icon="false" />
							</view>
						</uni-forms-item>
						<uni-forms-item name="deliveryAddress">
							<view class="add-view-item">
								<!-- <image class="add-view-item-img" src="@/subPage1/static/service/fuwufang.png" mode="widthFix">
								</image> -->
								<view class="add-view-item-name">服务地址：</view>
								<uni-easyinput v-model="formData.deliveryAddress" :inputBorder="false" placeholder="请输入服务地址">
								</uni-easyinput>
							</view>
						</uni-forms-item>
					</template>
						
					<view
						v-if="formData.executeType == 0"
						class="itemContent"
						:class="{ 'nodata': !formData.itemCharges || formData.itemCharges.length == 0 }"
					>
						<view class="sub-title">
							采购农资
						</view>
						<uni-forms-item
							class="execute-box"
							v-for="(itemson,indexson) in formData.itemCharges"
							:key="indexson"
						>
							<view class="farm-one">
								<view class="add-view-item">
									<view class="add-view-item-name">农资名称：</view>
									<!-- <hpy-form-select style="width: 480rpx;" @change="executeChange($event, itemson, indexson)"
										:dataList="farmingAssetList" text="farmingAssetName" name="farmingAssetName"
										v-model="itemson.farmingAssetName" hideBorder title="请选择" /> -->
									<uni-easyinput v-model="itemson.name" placeholder="请输入" :inputBorder="false">
									</uni-easyinput>
								</view>
								<view class="add-view-item">
									<view class="add-view-item-name">农资单位：</view>
									<uni-easyinput v-model="itemson.unit" placeholder="请输入" :inputBorder="false">
									</uni-easyinput>
								</view>
								<view class="add-view-item">
									<view class="add-view-item-name">农资数量：</view>
									<uni-easyinput v-model="itemson.amount" placeholder="请输入" type="number" :inputBorder="false">
									</uni-easyinput>
									{{itemson.unit||''}}
								</view>
								<view class="add-view-item">
									<view class="add-view-item-name">农资单价：</view>
									<uni-easyinput v-model="itemson.price" disabled placeholder="请输入" type="number" :inputBorder="false">
									</uni-easyinput>
									元/{{itemson.unit||''}}
								</view>
								<view class="add-view-item">
									<view class="add-view-item-name">总价：</view>
									<view class="itemValue">{{itemson.amount*itemson.price || ''}}</view>
									<view class="unit">
										元
									</view>
								</view>
							</view>
							<uni-icons class="remove" type="minus-filled" size="36" color="#286AFF" @click="removeOne(itemson, indexson)"></uni-icons>
						</uni-forms-item>
						<uni-icons class="add" type="plus-filled" size="36" color="#286AFF" @click="addOne"></uni-icons>
						<view class="total-prices">
							<view class="prices">
								<view class="title">
									全部总价：
								</view>
								<view class="price">
									{{ allPrice }}元
								</view>
							</view>
						</view>
					</view>
					
					<template v-if="formData.executeType == 1">
						<uni-forms-item>
							<view class="add-view-item">
								<view class="add-view-item-name">子类：</view>
								<uni-easyinput disabled v-model="formData.serviceSubTypeName" :inputBorder="false"
									placeholder="请输入" type="text">
								</uni-easyinput>
							</view>
						</uni-forms-item>
						<uni-forms-item>
							<view class="add-view-item">
								<view class="add-view-item-name">种植亩数(亩)：</view>
								<uni-easyinput
									v-model="bindValue('volume').numValue"
									:inputBorder="false" placeholder="请输入"
									type="number"
									@change="inputChange($event, 'volume')"
									@input="inputChange($event, 'volume')">
								</uni-easyinput>
							</view>
						</uni-forms-item>
						<uni-forms-item>
							<view class="add-view-item">
								<view class="add-view-item-name">服务次数(次)：</view>
								<uni-easyinput
									v-model="bindValue('times').numValue"
									:inputBorder="false" placeholder="请输入"
									type="number"
									@change="inputChange($event, 'times')"
									@input="inputChange($event, 'times')">
								</uni-easyinput>
							</view>
						</uni-forms-item>
						<uni-forms-item>
							<view class="add-view-item">
								<view class="add-view-item-name">实际服务亩数(亩)：</view>
								<uni-easyinput
									v-model="bindValue('acturalVolume').numValue"
									:inputBorder="false" placeholder="请输入"
									type="number"
									disabled>
								</uni-easyinput>
							</view>
						</uni-forms-item>
						<uni-forms-item>
							<view class="add-view-item">
								<view class="add-view-item-name">服务开始日期：</view>
								<uni-datetime-picker
									type="date"
									v-model="bindValue('serviceBegin').textValue"
									:left-icon="false"
									:clear-icon="false"
								/>
							</view>
						</uni-forms-item>
						<uni-forms-item>
							<view class="add-view-item">
								<view class="add-view-item-name">服务结束日期：</view>
								<uni-datetime-picker
									type="date"
									v-model="bindValue('serviceEnd').textValue"
									:left-icon="false"
									:clear-icon="false"
								/>
							</view>
						</uni-forms-item>
						<uni-forms-item>
							<view class="add-view-item">
								<view class="add-view-item-name">服务地址：</view>
								<hpy-form-select style="width: calc(100% - 155rpx);"
									v-model="bindValue('address').textValue"
									:dataList="addressList" text="addressDetail" name="id"
									@change="addressChange" hideBorder title="请选择" />
							</view>
						</uni-forms-item>
						<uni-forms-item
							v-for="(itemson,indexson) in getCustomField(serviceObj.serviceProperties || [])"
							:key="indexson"
							class="itemContent"
						>
							<view class="add-view-item">
								<view class="add-view-item-name">{{itemson.propertyName}}：</view>
								<uni-easyinput v-model="itemson.textValue" :inputBorder="false" placeholder="请输入">
								</uni-easyinput>
							</view>
						</uni-forms-item>
						<view class="total-prices">
							<view class="prices">
								<view class="title">
									预计单价：
								</view>
								<view class="price">
									<uni-easyinput
										class="price-input"
										v-model="bindValue('unitPrice').numValue"
										placeholder="请输入"
										type="number"
										:clearable="false"
									>
									</uni-easyinput>元/亩
								</view>
								<view class="title">
									预计价格：
								</view>
								<view class="price">
									{{ (bindValue('unitPrice').numValue * bindValue('acturalVolume').numValue) || '' }}元
								</view>
							</view>
						</view>
					</template>
					<view class="bottom-ios-line"></view>
				</view>
			</uni-forms>
		</scroll-view>
		<view class="submit">
			<button @click="recordaddmet()" class="submit-btn">
				<text>发送变更申请</text>
			</button>
		</view>
	</view>

</template>

<script>
	import {
		agrServiceUrl
	} from '@/config/baseUrl.js'
	import {
		dateToFormat2
	} from "@/plugins/timestamp.js"
	import abnormalOrderApi from '@/api/socialized-servce/order-center/abnormal-order.js'
	import addressManagementApi from '@/api/socialized-servce/person-message/service-address-management.js'
	export default {
		data() {
			return {
				addressArray: [],
				addressList: [],
				formData: {},
				serviceObj: {},
				type: '',
				farmingAssetList: [],
				// 表单验证
				rules: {
					deliveryStartDate: {
						rules: [{
							required: true,
							errorMessage: '请选择服务开始时间',
						}]
					},
					deliveryEndDate: {
						rules: [{
							required: true,
							errorMessage: '请选择服务结束时间',
						}]
					},
					deliveryAddress: {
						rules: [{
							required: true,
							errorMessage: '请输入服务地址',
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请选择服务地址',
						}]
					},
					volume: {
						rules: [{
							required: true,
							errorMessage: '请输入种植亩数',
						}]
					},
					times: {
						rules: [{
							required: true,
							errorMessage: '请输入服务次数',
						}]
					},
					serviceBegin: {
						rules: [{
							required: true,
							errorMessage: '请选择服务开始时间',
						}]
					},
					serviceEnd: {
						rules: [{
							required: true,
							errorMessage: '请选择服务结束时间',
						}]
					},
				},
			}
		},
		onLoad(e) {
			if (Object.keys(e).length) {
				this.formData = JSON.parse(e.data)
				if (this.formData.executeType == 0) {
					this.findApplyFarmingAsset()
				}
				this.serviceObj = this.formData.serviceObj || {}
				let list = this.serviceObj.serviceProperties
				this.serviceProperties = []
				list && list.forEach(item => {
					if (item.expression === 'serviceEnd' || item.expression === 'serviceBegin') {
						let date_value = item.textValue.replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/,
							"$1-$2-$3 $4:$5:$6")
						item.textValue = date_value
						// let nowtime = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date())
					}
				})
				console.log(this.formData);
			}
		},

		onShow() {},
		mounted() {
			this.setcollapseheight()
			if (this.formData.executeType == 1) {
				this.memberAddress()
			}
		},
		computed: {
			allPrice() {
				let co = 0
				this.formData.itemCharges.map(el => {
					co += (el.amount*el.price || 0)
				})
				return co
			}
		},
		watch: {},
		methods: {
			getCustomField(list) {
				let arr = list.filter(el => {
					return el.propertyCode
				})
				return arr
			},
			bindValue(expression) {
				let row = this.serviceObj.serviceProperties.find(el => {
					return el.expression == expression
				})
				return row || {}
			},
			findApplyFarmingAsset() {
				abnormalOrderApi.findApplyFarmingAsset({
					organizationNo: uni.getStorageSync('organizationNo'),
					providerNo: uni.getStorageSync('providerNo'),
				}).then(res => {
					this.farmingAssetList = res.data
				})
			},
			getOrderType(value) {
				if (value == 0) {
					return '采购单'
				} else if (value == 1) {
					return '服务单'
				} else {
					return '--'
				}
			},
			//地址
			memberAddress() {
				addressManagementApi.queryByCondition({
					memberNo: this.formData.memberNo
				}).then(res => {
					let list = res.data || []
					list.forEach(item => {
						item.addressDetail = `${item.fullAddress}${item.detail}`
					})
					this.addressList = list
				})
			},
			addressChange(e) {
				let obj = e.data
				let rowArea = this.serviceObj.serviceProperties.find(el => {
					return el.expression == 'area'
				})
				rowArea.textValue = obj.provinceId + ',' + obj.cityId + ',' +  obj.areaId
				let rowAddressInfo = this.serviceObj.serviceProperties.find(el => {
					return el.expression == 'addressInfo'
				})
				rowAddressInfo.textValue = obj.detail
				let rowAddressArea = this.serviceObj.serviceProperties.find(el => {
					return el.expression == 'addressArea'
				})
				rowAddressArea.textValue = obj.addressDetail
			},
			inputChange(e, expression) {
				this.bindValue(expression).numValue = e
				let list = this.serviceObj.serviceProperties
				let sumobj = list.find(item => {
					return item.expression === 'payAmount'
				})
				let acturalobj = list.find(item => {
					return item.expression === 'acturalVolume'
				})
				if (expression === 'times') {
					let obj2 = list.find(item => {
						return item.expression === 'times'
					})
					obj2.numValue = obj2.numValue && Number(obj2.numValue) < 0 ? 0 : obj2.numValue
					
					let obj = list.find(item => {
						return item.expression === 'volume'
					})
					sumobj.numValue = (Number(obj.numValue) * Number(obj2.numValue) * Number(this.formData.price)).toFixed(2)
					acturalobj.numValue = (Number(obj.numValue) * Number(obj2.numValue)).toFixed(2)
				} else if (expression === 'volume') {
					let obj2 = list.find(item => {
						return item.expression === 'volume'
					})
					obj2.numValue = obj2.numValue && Number(obj2.numValue) < 0 ? 0 : obj2.numValue
					
					let obj = list.find(item => {
						return item.expression === 'times'
					})
					sumobj.numValue = (Number(obj.numValue) * Number(obj2.numValue) * Number(this.formData.price)).toFixed(2)
					acturalobj.numValue = (Number(obj.numValue) * Number(obj2.numValue)).toFixed(2)
					// console.log(obj);
				}
			},

			deletePic1(event) {
				this.fileList1.splice(event.index, 1)
				this.formData.imgList1.splice(event.index, 1)
			},
			async afterRead1(event) {
				this.type = 'image1'
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList1.length
				lists.map((item) => {
					this.fileList1.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList1[fileListLen]
					this.fileList1.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: `${agrServiceUrl}${result.slice(1)}`,
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: agrServiceUrl +
							`common/file/upDown/getUploadUrl?moduleType=XG_ORGANIZATION&upDownType=FTP`,
						filePath: url,
						name: 'file',
						header: {
							'token': uni.getStorageSync("satoken") || ''
						},
						formData: {},
						success: async (res) => {
							const dataObj = JSON.parse(res.data);
							const data = dataObj.data;
							console.log(data, '图片');
							resolve(data);
							if (this.type == 'image') {
								this.formData.imgList.push({
									imgId: data.slice(33),
									imgUrl: `${agrServiceUrl}${data.slice(1)}`
								})
								this.$refs.form.validateField('formData.imgList')
							} else if (this.type == 'image1') {
								this.formData.imgList1.push({
									imgId: data.slice(33),
									imgUrl: `${agrServiceUrl}${data.slice(1)}`
								})
								this.$refs.form.validateField('formData.imgList1')
							}
						},
						fail: () => {
							uni.showToast({
								title: '图片上传失败',
								icon: 'error'
							})
						}
					});
				})
			},
			executeChange(e, row, i) {
				this.$set(this.formData.itemCharges, i, { ...e.data })
			},
			addOne() {
				if (!this.formData.itemCharges) {
					this.$set(this.formData, 'itemCharges', [])
				}
				this.formData.itemCharges.push({})
			},
			removeOne(row, i) {
				this.formData.itemCharges.splice(i, 1)
			},
			// 提交方法
			recordaddmet() {
				if (this.formData.executeType == 0) {
					if (!this.formData.deliveryStartDate || !this.formData.deliveryEndDate) {
						uni.showToast({
							title: '请填写服务时间',
							icon: 'none'
						})
						return
					}
					if (new Date(this.formData.deliveryStartDate).getTime() > new Date(this.formData.deliveryEndDate).getTime()) {
						uni.showToast({
							title: '服务开始时间不能晚于结束时间',
							icon: 'none'
						})
						return
					}
					if (this.formData.itemCharges && this.formData.itemCharges.length) {
						let bool = false, bool2 = false
						this.formData.itemCharges.map(el => {
							if (!el.name || !el.unit || !el.amount) {
								bool = true
							}
							if (el.amount < 0) {
								bool2 = true
							}
						})
						if (bool) {
							uni.showToast({
								title: '请填写采购农资',
								icon: 'none'
							})
							return
						}
						if (bool2) {
							uni.showToast({
								title: '农资数量不能为负数',
								icon: 'none'
							})
							return
						}
				}
				}
				if (this.formData.executeType == 1) {
					if (!this.bindValue('volume').numValue) {
						uni.showToast({
							title: '请填写种植亩数(亩)',
							icon: 'none'
						})
						return
					}
					if (this.bindValue('volume').numValue < 0) {
						uni.showToast({
							title: '种植亩数不能为负数)',
							icon: 'none'
						})
						return
					}
					if (!this.bindValue('times').numValue) {
						uni.showToast({
							title: '请填写服务次数(次)',
							icon: 'none'
						})
						return
					}
					if (this.bindValue('times').numValue < 0) {
						uni.showToast({
							title: '服务次数不能为负数',
							icon: 'none'
						})
						return
					}
					if (!this.bindValue('unitPrice').numValue) {
						uni.showToast({
							title: '请填写预计单价',
							icon: 'none'
						})
						return
					}
					if (this.bindValue('unitPrice').numValue < 0) {
						uni.showToast({
							title: '预计单价不能为负数',
							icon: 'none'
						})
						return
					}
					if (new Date(this.bindValue('serviceBegin').textValue).getTime() > new Date(this.bindValue('serviceEnd').textValue).getTime()) {
						uni.showToast({
							title: '服务开始时间不能晚于结束时间',
							icon: 'none'
						})
						return
					}
				}
				let params = { ...this.formData }
				if (this.serviceObj.serviceProperties) {
					// let serviceProperties = [...this.serviceObj.serviceProperties]
					let serviceProperties = JSON.parse(JSON.stringify(this.serviceObj.serviceProperties))
					serviceProperties.forEach((item,index) => {
						if (item.expression === 'serviceBegin' || item.expression === 'serviceEnd') {
							item.textValue = dateToFormat2(item.textValue)
						}
						if (item.expression === 'payAmount') {
							item.numValue = this.bindValue('unitPrice').numValue * this.bindValue('acturalVolume').numValue
						}
					})
					serviceProperties = [
						...serviceProperties,
						...this.addressArray
					]
					let serviceObj = { ...this.serviceObj }
					serviceObj.serviceProperties = serviceProperties
					let form = { ...this.formData }
					form.serviceObj = serviceObj
					params = {
						...form
					}
				}
				this.$refs.form.validate().then(res => {
					console.log(params);
					uni.showLoading({
						title: '提交中'
					});
					abnormalOrderApi.applyChange(params).then(res => {
						uni.showToast({
							title: res.code == 200 ? '申请成功' : res.message || res.msg,
							icon: res.code == 200 ? 'success' : 'none'
						});
						if (res.code == 200) {
							setTimeout(() => {
								uni.hideLoading();
								this.$togo('/pages/socialized-service/order-center/order-center')
								// uni.navigateBack({
								// 	delta: 1
								// })
							}, 1000);
						}
					})
				}).catch(err => {
					uni.hideLoading();
					console.log(err, 'err');
				})
			},


			setcollapseheight() {
				let topheightone = uni.upx2px(286)
				// let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				winHeight = parseInt(winHeight) - topheightone
				// #ifndef H5
				winHeight = winHeight

				// #endif
				return winHeight
			},
			//--------顶部导航栏方法-----
			//返回上一步
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-date {
		height: 70rpx;
	}

	// 表单验证样式
	.uni-forms-item {
		margin-bottom: 10rpx;
	}

	::v-deep .uni-forms-item__error.msg--active {
		opacity: 1;
		z-index: 2;
		-webkit-transform: translateY(0%);
		transform: translateX(40rpx) translateY(-10rpx);
	}

	::v-deep .uni-forms-item__error {
		margin-left: 85rpx;
		margin-top: -20rpx;
	}

	.u-button {
		width: 130rpx;
		height: 60rpx;
		border-radius: 50rpx;
		text-align: center;

		.image {
			width: 80rpx;
			height: 40rpx;
		}
	}

	.jian {
		background-color: #f44;
	}

	.jia {
		background-color: #2F99FF;
	}

	.submit-btn {
		width: 268rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: linear-gradient(27deg, #2F99FF 0%, #62B1FF 100%);
		box-shadow: 0rpx 0rpx 10rpx 2rpx #0082FF;
		border-radius: 40rpx;
		letter-spacing: 1rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;


		.icon-submit {
			margin-right: 10rpx;
		}
	}

	.record-add-view {
		width: 95%;
		margin: 0rpx auto;
		
		.sub-title {
			padding: 10rpx 0;
		}
		
		.itemContent {
			position: relative;
			.execute-box {
				position: relative;
				.remove {
					padding-left: calc(50% + 20rpx);
				}
			}
			.add {
				position: absolute;
				bottom: 114rpx;
				right: calc(50% + 20rpx);
			}
			&.nodata {
				.add {
					bottom: 40rpx;
				}
			}
		}
		
		.farm-one {
			background: #EDEEF5;
			padding: 20rpx;
			.add-view-item {
				margin-bottom: 20rpx;
				&:last-child {
					margin-bottom: 0;
				}
			}
			::v-deep {
				.select-picker,
				.uni-easyinput__content-input {
					padding: 0 !important;
					color: #333;
				}
			}
		}

		.add-view-item {
			width: calc(100% - 40rpx);
			min-height: 80rpx;
			margin-top: 10rpx;
			padding: 8rpx 20rpx;
			color: #959595;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: flex-start;
			background-color: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			font-size: 28rpx;
			position: relative;

			.arrowdown {
				position: absolute;
				right: 20rpx;
			}

			.add-view-item-img {
				width: 26rpx;
			}

			.add-view-item-name {
				margin-left: 10rpx;
				min-width: 160rpx;
				max-width: 240rpx;
				overflow: hidden;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				white-space: nowrap;
				margin-right: 10rpx;
			}

			.add-view-item-value {
				width: 380rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;

				.hasvalueinput {
					font-size: 28rpx;
					height: 40rpx;
					line-height: 60rpx;
					color: #000000;
				}

				.nohasvalueinput {
					font-size: 28rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #ccc;
				}
			}

			.line-color-black {
				color: #000000;
			}
		}

		.button-add {
			right: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			::v-deep uni-button[size=mini] {
				padding: 0rpx 6rpx;
				width: 180rpx;
				height: 60rpx;
			}
		}
	}

	.submit {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		text-align: center;
		transform: translateX(-50%);
		padding-bottom: calc(env(safe-area-inset-bottom) + 15px);
	}

	::v-deep .uni-date-x .icon-calendar {
		padding-left: 3px;
		display: none;
	}

	::v-deep .uni-date-x--border {
		border: 0rpx;
	}
	
	::v-deep {
		.uniui-clear {
			font-size: 36rpx !important;
		}
		// .is-disabled {
		// 	background: transparent !important;
		// }
		.placeholder {
			color: #333 !important;
		}
	}
	
	.itemValue {
		color: #333;
		
		&.disable {
			background-color: rgb(238, 238, 238);
			width: 100%;
			display: flex;
			box-sizing: border-box;
			min-height: 36px;
			flex-direction: row;
			align-items: center;
			padding-left: 20rpx;
		}
	}
	
	.unit {
		position: absolute;
		right: 20rpx;
	}
	
	.total-prices {
		padding: 20rpx 0 50rpx;

		.prices {
			display: flex;
			justify-content: flex-end;
			// align-items: center;

			.title {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #606060;
				vertical-align: middle;
			}

			.price {
				font-size: 28rpx;
				font-family: Arial-Bold, Arial;
				font-weight: bold;
				color: #2165FF;
				vertical-align: middle;
				margin-right: 30rpx;
			}
		}
	}
	.price-input {
		width: 130rpx;
		height: 40rpx;
		display: inline-block;
		::v-deep {
			.uni-easyinput__content {
				min-height: 40rpx !important;
				height: 40rpx;
			}
		}
	}
</style>